<template>
	<view class="content">
		<view class="search">
			<image src="/static/images/搜索.png" mode="aspectFit"></image>
			<input type="text" placeholder="搜索房源" v-model="searchData.keywords" class="search-input" />
		</view>
		<view class="nav">
			<view class="item" @click="areaBtn">
				<view class="lable">
					{{(!searchData.region && !searchData.sector)?'区域':''}}
					{{searchData.region?searchData.region:''}}
					{{searchData.sector?searchData.sector:''}}
				</view>
				<image src="/static/images/Polygon 1.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="priceBtn">
				<view class="lable">
					{{searchData.minRent && searchData.maxRent ? searchData.minRent +"-"+searchData.maxRent+'元' : searchData.minRent? searchData.minRent+'元': searchData.maxRent ? searchData.maxRent+'元':"价格"}}
				</view>
				<image src="/static/images/Polygon 1.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="roomBtn">
				<view class="lable">
					{{roomText || '出租方式'}}
				</view>
				<image src="/static/images/Polygon 1.png" mode="aspectFill"></image>
			</view>
		</view>
		<view>
			<textComponents :searchData='searchData'  :showPhone="'1'"></textComponents>
		</view>
		<areaSelect v-model:show="areaRef" @select="handleAreaSelect"></areaSelect>
		<u-popup :show="priceRef" type="bottom" :z-index="9999" :round="20">
			<view class="popup-content" style="height: 700rpx">
				<view class="priceItem" :class="{active:price==priceItem}" @click="handlePrice(price)" v-for="(price, index) in priceRange" :key="index">
					{{ price }}
				</view>
				<view class="priceInput">
					<input type="text" v-model="minRent" placeholder="最小值" />
					<text>~</text>
					<input type="text" v-model="maxRent" placeholder="最大值" />
					<text>元</text>
				</view>
				<view class="button-container">
					<button class="btn1" @click="priceCancel1">关闭</button>
					<button class="btn2" @click="priceConfirm1">确定</button>
				</view>
			</view>
		</u-popup>
		<u-popup type="bottom" :show="roomRef" :z-index="9999" @close='roomRef=false'>
			<view class="room-picker-container">
				<view v-for="(room, index) in labelRange" :class="{active:room==roomItem}" @click="handleRoom(room)" :key="index">{{ room }}</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		onHide
	} from "@dcloudio/uni-app"
	import {
		onLoad,
        onShow,
	} from "@dcloudio/uni-app"
	import {
		computed,
		ref
	} from "vue"
	const roomMap = {
		'隔断房': 'PARTITION',
		'转租': 'SUBLEASE',
		'整租': 'WHOLE_RENTAL',
		'合租': 'COTENANCY'
	}

	const labelRange = ref(['不限', '隔断房', '转租', '整租', '合租'])
	const areaTwoList = ref([
		'不限',
		"A区",
		"B区",
		"C区",
		"D区",
		"E区",
		"F区",
		"G区",
		"H区",
		"I区",
		"J区",
		"K区",
		"L区",
		"M区",
		"N区",
		"O区",
		"P区",
		"Q区",
		"R区",
		"S区",
		"T区",
		"U区",
		"V区",
		"W区",
		"X区",
		"Y区",
		"Z区"
	])
	const priceRange = ref(['不限', '1000以下', '1000~1500', '1500~3000', '3000~5000', '5000~8000', '10000元以上'])
	const areaRef = ref(false)
	const priceItem = ref('')
	const roomItem = ref('')
	const priceRef = ref(false)
	const roomRef = ref(false)
	const radiovalue1 = ref('');
	const radiovalue2 = ref('');
	const searchData = ref({})
	const minRent = ref('')
	const maxRent = ref('')
	const areaList = ref(['不限', '花果园区'])
	const bannerList = ref(['A区', 'B区', 'C区', 'D区'])
    onLoad((options) => {
		// uni.$on('list-search', function(data) {
		// 	console.log(data, "+++++++++++++")
		// 	data && (searchData.value = data)
		// })
	})
    onShow(() => {
        searchData.value = {}
        const params = uni.getStorageSync('switchTabParams');
        if (params) {
            searchData.value = params
        }
    });

    onHide(() => {
		setTimeout(() => {
			let pages = getCurrentPages()
			let page = pages[pages.length - 1]
			// 不是当前页面
			if (!page.route.includes('page/list/list')) {
				searchData.value = {}
			}
		})

	})
	const roomText = computed(() => {
        let text=''
		for (let key in roomMap) {
			if (roomMap[key] == searchData.value.rentType) {
                text= key
			}
		}
        return text
	})
	const settingsLayout = () => {
		uni.navigateTo({
			url: '/pages/settings/settings'
		})
	}
	const areaBtn = () => {
		areaRef.value = true
	}
	const priceBtn = () => {
		console.log("+++++")
		priceRef.value = true
	}
	const roomBtn = () => {
		roomRef.value = true
	}
	const pickerCancel1 = () => {
		radiovalue1.value = ''
		radiovalue2.value = ''
	}
	const pickerConfirm1 = () => {
		searchData.value.region = radiovalue1.value
		searchData.value.sector = radiovalue2.value
		areaRef.value = false
	}
	const priceCancel1 = () => {
		priceRef.value = false
	}
	const priceConfirm1 = () => {
		searchData.value = {
			...searchData.value,
			minRent: minRent.value,
			maxRent: maxRent.value
		}
		priceRef.value = false
	}
	// up-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
	const groupChange = (n) => {
		radiovalue1.value = n
		console.log('groupChange', n);
	};
	const groupChange2 = (n) => {
		radiovalue2.value = n
		console.log('groupChange', n);
	};
	const handleAreaSelect = (value) => {
		searchData.value = {
			...searchData.value,
			...value
		}
	}
	const handlePrice = (price) => {
        priceItem.value = price;
		if (price == '不限') {
			minRent.value = ''
			maxRent.value = ''
		} else if (price.includes('以下')) {
			minRent.value = ""
			maxRent.value = price.replace('以下', '')
		} else if (price.includes('以上')) {
			minRent.value = price.replace('元以上', '')
			maxRent.value = ''
		} else if (price.includes("~")) {
			price = price.split("~")
			minRent.value = price[0]
			maxRent.value = price[1]
		}

	}
	const handleRoom = (room) => {
        roomItem.value = room
		searchData.value = {
			...searchData.value,
            rentType: room == '不限' ? '' : roomMap[room]
		}

		roomRef.value = false
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 32rpx;
		margin-top: 22rpx;

		.search {
			position: relative;
			display: flex;
			align-items: center;
			width: 618rpx;
			height: 56rpx;
			border-radius: 100rpx;
			padding: 16rpx 34rpx;
			gap: 17rpx;
			background-color: rgba(247, 247, 247, 1);

			.search-input {
				width: 686rpx;
				height: 88rpx;
				font-size: 26rpx;
				line-height: 100%;

			}

			image {
				width: 35rpx;
				height: 32rpx;
				opacity: 80%;
			}
		}

		.nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 634rpx;
			height: 36rpx;
			padding: 12rpx 24rpx;
			margin-bottom: 24rpx;
			margin-top: 24rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 36rpx;

				image {
					width: 18rpx;
					height: 13.85rpx;
					border-radius: 1rpx;
					margin-left: 20rpx;
				}
			}
		}

		.details {
			display: flex;
			width: 686rpx;
			height: 187rpx;
			box-shadow: 0 0 40 0 rgba(230, 237, 246, 0.5);

			.pic {
				image {
					width: 250rpx;
					height: 187rpx;
					border-radius: 5rpx;
				}
			}

			.info {
				width: 430rpx;
				height: 155rpx;
				padding: 16rpx 18rpx;

				.title {
					display: flex;
					justify-content: space-between;
					width: 356rpx;
					height: 39rpx;
					gap: 16rpx;
					margin-bottom: 16rpx;

					.type_detail {
						width: 40rpx;
						height: 36rpx;
						border-radius: 3rpx;
						padding: 4rpx 10rpx;
						gap: 107rpx;
						font-size: 20rpx;
						background-color: rgba(250, 169, 63, 1);
					}

					.item_title {
						font-size: 28rpx;
					}
				}

				.area {
					width: 160rpx;
					height: 36rpx;
					gap: 8rpx;
					margin-bottom: 16rpx;

					text {
						width: 60rpx;
						height: 36rpx;
						border-radius: 3rpx;
						border: 1rpx solid rgba(187, 187, 187, 1);
						padding: 4rpx 10rpx;
						gap: 107rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(187, 187, 187, 1);
						margin-right: 8rpx;
					}
				}

				.price {
					width: 160rpx;
					height: 39rpx;
					gap: 7rpx;
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: rgba(234, 35, 35, 1);

					.fontSize {
						font-size: 22rpx;
					}
				}
			}
		}

		.room-picker-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 686rpx;
			height: 270rpx;
			gap: 40rpx;
			border-top-right-radius: 29rpx;
			border-top-left-radius: 29rpx;
			padding: 40rpx 32rpx 130rpx 32rpx;
			background-color: rgba(255, 255, 255, 1);
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			width: 686rpx;
			height: 500rpx;
			gap: 40rpx;
			padding: 40rpx 32rpx 130rpx 32rpx;
			border-top-right-radius: 29rpx;
			border-top-left-radius: 29rpx;
			background-color: rgba(255, 255, 255, 1);

			.row-container {
				display: flex;

				.row {
					text-align: center;
					width: 750rpx;
					height: 360rpx;
					gap: 155rpx;
					font-size: 30rpx;

					.row_item {
						margin-bottom: 32rpx;
					}

					.option-text {
						width: 300rpx;
						padding-left: 10px;
						gap: 31rpx;
						border-left: 1rpx solid rgba(79, 129, 240, 1);
					}

					.option {
						display: flex;
						justify-content: space-between;
						width: 310rpx;
						height: 39rpx;
						padding: 25rpx 24rpx 25rpx 10rpx;



						input {
							width: 23rpx;
							height: 20rpx;
							border: 1rpx solid rgba(0, 0, 0, 1);
						}
					}

					.optionitem {
						background-color: rgba(247, 247, 247, 1);
					}
				}
			}

			.button-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 686rpx;
				height: 78rpx;
				margin-top: 60rpx;
				gap: 60rpx;

				button {
					width: 313rpx;
					height: 78rpx;
					gap: 10rpx;
					font-size: 28rpx;
					border-radius: 100rpx;
					border: 2rpx solid rgba(79, 129, 240, 1);
					padding: 9rpx 20rpx;
				}

				.btn1 {
					background-color: rgba(79, 129, 240, 0.1);
					color: rgba(79, 129, 240, 1);

				}

				.btn2 {
					color: rgba(255, 255, 255, 1);
					background-color: rgba(79, 129, 240, 1);
				}
			}

			.priceInput {
				display: flex;
				gap: 30rpx;
				padding: 0 30rpx;
			}

			.priceItem {
				text-align: center;
			}
            .active{
                color: rgba(79, 129, 240, 1);
            }
		}
	}
</style>